<template>
  <div class="square2">
    <div class="square2-top-header">标题</div>
    <div class="square2-content-x">
      <div class="square2-content">
        <!-- <span>
          <span class="square2-content-label">工单编号</span>
          <span class="square2-content-txt">20020221322</span>
        </span> -->
        <span>
          <span class="square2-content-label">故障时间</span>
          <span class="square2-content-txt">2022年11月4日</span>
        </span>
        <span>
          <span class="square2-content-label">维修状态</span>
          <span class="square2-content-txt blue">已修复</span>
        </span>
      </div>
      <div class="square2-content" style="margin-left: 5%">
        <span class="label"><span class="label-txt">集群故障</span></span>
        <span class="label">
          <span class="label-txt">影响节点</span>
          <span class="label-txt" style="color: #fff; margin-left: 5px">102</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SuqareItem2',
}
</script>

<style scoped>
.square2 {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  image-rendering: -webkit-optimize-contrast;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01mL2y2527YZe9A3uYA_!!6000000007809-2-tps-854-284.png);
  -webkit-mask-image: none;
  -webkit-mask-repeat: initial;
  -webkit-mask-size: initial;
  background-color: initial;
  border-radius: 0;
  cursor: pointer;
  padding: 0.9375rem 1.25rem;
  box-sizing: border-box;
}
.square2-top-header {
  text-align: left;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-family: arial;
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-indent: 0;
  letter-spacing: 0;
  word-break: break-all;
  margin-bottom: 0.625rem;
}
.square2-content-x {
  display: flex;
  align-items: center;
}
.square2-content {
  display: flex;
  flex-direction: column;
}
.square2-content-label {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  font-family: arial;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-indent: 0;
  letter-spacing: 0.0625rem;
  word-break: break-all;
}
.square2-content-txt {
  text-align: left;
  color: rgb(255, 255, 255);
  font-weight: 300;
  font-family: arial;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-indent: 0;
  letter-spacing: 0;
  word-break: break-all;
  margin-left: 0.625rem;
}
.square2-content-txt.blue {
  color: #3cdaaf;
}
.square2-content .label {
  background-color: rgba(63, 229, 183, 0.15);
  width: fit-content;
  height: 1.125rem;
  border: 1px solid rgb(63, 229, 183);
  border-radius: 3px;
  color: #fff;
  margin: 0.3125rem 1.25rem;
  line-height: 1;
  padding: 2px 4px;
}
.label-txt {
  text-align: center;
  color: rgb(63, 229, 183);
  font-weight: 300;
  font-family: arial;
  font-size: 0.75rem;
  text-indent: 0;
  letter-spacing: 0.0625rem;
  word-break: break-all;
}
</style>
